<template>
	<div >
		<ul class="time-line-box">
			<li class="time-line-item" v-for="(item, index) in activities" :key="index">
				<span class="text-time">{{ item.timeLabel }}</span>
				<!-- <span class="text-label">{{ item.orderStatusName }}</span> -->
				<span class="text-label">{{ item.remarks }}</span>
			</li>
		</ul>
		<AplidPaginate v-bind="pageReac" @change="onPageChange" class="pageinate mt10" />
	</div>
</template>

<script lang="ts" setup>
import apiMod from '@/apiMod/index'
import { useDateFormat } from '@vueuse/core'
import { AplidPaginate } from '@/components/AplidCrud'
const props = defineProps<{
	orderId: any
	orderStatusArr?: any
}>()

const activities = ref([])
const pageReac = ref({
	total: 0,
	size: 10,
	current: 1,
})

const onPageChange = (page) => {
	pageReac.value = page
	getInitData()
}
const getInitData = () => {
	apiMod
		.view_omOrderOperatingRecord_page({
			orderId: props.orderId,
			pageParaPO: {
				...pageReac.value,
			},
		})
		.then((res) => {
			const data = res.data
			if (data.total) {
				pageReac.value.total = data.total
				pageReac.value.current = data.current
			} else {
				pageReac.value.total = 0
			}

			activities.value = data.records.map((item) => {
        const orderStatusObj = props.orderStatusArr.find(v => v.value == item.orderStatus) || {}
				return {
					...item,
          orderStatusName:orderStatusObj.label||item.orderStatusLabel,
					timeLabel: useDateFormat(item.createTime, 'YYYY年MM月DD日 HH:mm:ss'),
				}
			})
		})
}
onMounted(() => {
	getInitData()
})
</script>
<style scoped lang="scss">
.time-line-box {
	padding: 0 23px;
	.time-line-item {
		position: relative;
		z-index: 1;
		line-height: 37px;
		padding: 0 28px;
		display: flex;
		align-items: center;
		gap: 5px;
		color: #000000e6;
		font-size: 16px;
		font-family: 'Microsoft YaHei';
		font-weight: 400;
		letter-spacing: 0;

		&:after {
			content: '';
			position: absolute;
			top: 16px;
			left: 0;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			border: 2px solid #0052d9;
		}
		&:not(:last-child):before {
			content: '';
			position: absolute;
			top: 80%;
			left: 4px;
			width: 2px;
			height: 50%;
			background: #0052d9;
		}
		.text-time {
			margin-right: 20px;
		}
	}
}
</style>
